<!--
 * @Description: 
 * @Author: zhanyinjia
 * @Date: 2022-10-11 13:46:42
 * @LastEditors: zhanyinjia
 * @LastEditTime: 2022-10-14 16:56:52
-->
<template>
  <div class="example">
    <h3>保留状态</h3>
    <div class="selects">{{ selectNames }}</div>
    <input class="checkbox" :checked="totalCheck" @change="totalChange" type="checkbox" />
    <virtual-list
      class="list-keep scroll-touch"
      :data-key="'id'"
      :data-sources="items"
      :data-component="itemComponent"
      :estimate-size="60"
      :item-class="'list-item-keep'"
    />
  </div>
</template>

<script>
import Item2 from './Item2.vue'
const TOTAL_COUNT = 1000
const DataItems = []
let count = TOTAL_COUNT
while (count--) {
  const index = TOTAL_COUNT - count
  DataItems.push({
    index,
    name: `张三${index}`,
    id: index,
    checked: false
  })
}
export default {
  name: 'keep-state',
  data() {
    return {
      items: DataItems,
      itemComponent: Item2,
      totalCheck: false
    }
  },
  computed: {
    selectNames() {
      return this.items
        .map((item) => {
          if (item.checked) {
            return item.id
          }
        })
        .filter((item) => !!item)
    }
  },
  created() {
    // detecting change checked value from item component event.
    this.$on('checkBoxValueChange', (id, value) => {
      const targetItem = this.items.find((item) => item.id === id)
      if (targetItem) {
        targetItem.checked = value
      }
    })
  },
  methods: {
    totalChange() {
      this.totalCheck = !this.totalCheck
      this.items.forEach((item) => {
        item.checked = this.totalCheck
      })
    }
  }
}
</script>

<style lang="less">
.selects {
  margin-bottom: 1em;
  font-size: 14px;
}
.list-keep {
  width: 100%;
  height: 500px;
  border: 2px solid;
  border-radius: 3px;
  overflow-y: auto;
  border-color: dimgray;
  .list-item-keep {
    display: flex;
    align-items: center;
    padding: 0 1em;
    height: 60px;
    border-bottom: 1px solid;
    border-color: lightgray;
  }
}
.checkbox {
  text-align: center;
  width: 30px;
  height: 30px;
  border: none;
  outline: none;
  appearance: none;
  margin: 0;
}
.checkbox {
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center left;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='-10 -18 100 135'%3E%3Ccircle cx='50' cy='50' r='50' fill='none' stroke='%23ededed' stroke-width='3'/%3E%3C/svg%3E");
}
.checkbox:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='-10 -18 100 135'%3E%3Ccircle cx='50' cy='50' r='50' fill='none' stroke='%23c28ce2' stroke-width='3'/%3E%3Cpath fill='%239b4dca' d='M72 25L42 71 27 56l-4 4 20 20 34-52z'/%3E%3C/svg%3E");
}
</style>